@if(agentDetails()) {
    <mat-card *ngIf="agentDetails().state === 'hitl_feedback'" class="p-3 mb-4">
        <form [formGroup]="feedbackForm" (ngSubmit)="onSubmitFeedback()">
            <mat-card-title class="font-bold pl-5 text-lg">Feedback Requested</mat-card-title>
            <mat-card-content style="margin-bottom: 0; margin-top: 15px">
                @if (agentDetails().functionCallHistory && agentDetails().functionCallHistory.length > 0) {
                    <mat-expansion-panel style="width: 1000px; margin-bottom: 20px">
                        <mat-expansion-panel-header>
                            <mat-panel-title>
                                <span style="margin-right: 5px"><strong>Question:</strong></span>
                                <span class="expansion-preview">
                                    {{ agentDetails()?.functionCallHistory[agentDetails()!.functionCallHistory.length - 1].parameters['request'].trim() | slice : 0 : 140 }}...
                                </span>
                            </mat-panel-title>
                        </mat-expansion-panel-header>
                        <div style="white-space: pre-wrap">
                            {{ agentDetails()?.functionCallHistory[agentDetails()!.functionCallHistory.length - 1].parameters['request'].trim() }}
                        </div>
                    </mat-expansion-panel>
                }
                <mat-form-field appearance="fill" class="full-width">
                    <textarea
                            matInput
                            class="resumeField"
                            placeholder="Enter your feedback"
                            formControlName="feedback"
                    ></textarea>
                </mat-form-field>
            </mat-card-content>
            <mat-card-actions style="margin-bottom: 0">
                <button mat-raised-button color="primary" type="submit" [disabled]="!feedbackForm.valid || isSubmitting()">
                    {{ isSubmitting() ? 'Sending...' : 'Send Feedback' }}
                </button>
                <button mat-raised-button class="ml-4" (click)="cancelAgent()" [disabled]="isSubmitting()">Cancel Agent</button>
            </mat-card-actions>
        </form>
    </mat-card>

    <mat-card *ngIf="agentDetails()?.state === 'error'" class="p-3 mb-4">
        <form [formGroup]="errorForm" (ngSubmit)="onResumeError()">
            <mat-card-title class="font-bold pl-5 text-lg">Agent Error</mat-card-title>
            <mat-card-content style="margin-bottom: 0; margin-top: 15px">
                @if (agentDetails()?.error) {
                    <mat-expansion-panel style="width: 1000px; margin-bottom: 20px">
                        <mat-expansion-panel-header>
                            <mat-panel-title>
                                <span style="margin-right: 5px"><strong>Error:</strong></span>
                                <span class="expansion-preview">{{ agentDetails()?.error | slice : 0 : 150 }}...</span>
                            </mat-panel-title>
                        </mat-expansion-panel-header>
                        <div style="white-space: pre-wrap">{{ agentDetails()?.error }}</div>
                    </mat-expansion-panel>
                }
                <mat-form-field appearance="fill" class="full-width">
                    <textarea
                            matInput
                            class="resumeField"
                            placeholder="Provide additional instructions to resume or workaround the error."
                            formControlName="errorDetails"
                    ></textarea>
                </mat-form-field>
            </mat-card-content>
            <mat-card-actions style="margin-bottom: 0">
                <button mat-raised-button color="primary" type="submit" [disabled]="!errorForm.valid || isResumingError()">
                    {{ isResumingError() ? 'Resuming...' : 'Resume Agent' }}
                </button>
                <button mat-raised-button color="warn" class="ml-4" (click)="cancelAgent()" [disabled]="isResumingError()">
                    Cancel Agent
                </button>
            </mat-card-actions>
        </form>
    </mat-card>

    <mat-card *ngIf="agentDetails()?.state === 'hitl_threshold'" class="p-3 mb-4">
        <form [formGroup]="hilForm" (ngSubmit)="onResumeHil()">
            <mat-card-title class="font-bold pl-5 text-lg">Human In Loop check</mat-card-title>
            <mat-card-content>
                <mat-form-field appearance="fill" class="full-width">
                    <textarea
                            matInput
                            class="resumeField"
                            placeholder="Provide additional details (optional)"
                            formControlName="feedback"
                    ></textarea>
                </mat-form-field>
            </mat-card-content>
            <mat-card-actions>
                <button mat-raised-button color="primary" type="submit" [disabled]="isSubmitting()">
                    {{ isSubmitting() ? 'Resuming...' : 'Resume' }}
                </button>
                <button mat-raised-button color="warn" class="ml-4" (click)="cancelAgent()" [disabled]="isSubmitting()">Cancel Agent
                </button>
            </mat-card-actions>
        </form>
    </mat-card>

    <mat-card *ngIf="agentDetails()?.state === 'hitl_user'" class="p-3 mb-4">
        <form [formGroup]="userHilForm" (ngSubmit)="onResumeUserHil()">
            <mat-card-title class="font-bold pl-5 text-lg">Human-in-the-Loop Check Requested</mat-card-title>
            <mat-card-content>
                <p class="mb-4">You have requested a Human-in-the-Loop check. Review the agent's progress and optionally provide additional guidance.</p>
                <mat-form-field appearance="fill" class="full-width">
                    <textarea
                            matInput
                            class="resumeField"
                            placeholder="Add optional note for the agent (optional)"
                            formControlName="note"
                    ></textarea>
                </mat-form-field>
            </mat-card-content>
            <mat-card-actions>
                <button mat-raised-button color="primary" type="submit" [disabled]="isSubmitting()">
                    {{ isSubmitting() ? 'Resuming...' : 'Resume' }}
                </button>
                <button mat-raised-button color="warn" class="ml-4" (click)="cancelAgent()" [disabled]="isSubmitting()">Cancel Agent
                </button>
            </mat-card-actions>
        </form>
    </mat-card>

    <mat-card class="p-8">
        <div>
            <mat-icon (click)="handleRefreshAgentDetails()" class="mr-3 cursor-pointer" [matTooltip]="'Reload'">refresh</mat-icon>
            <a href="{{ databaseUrl(agentDetails()!) }}" target="_blank" class="mr-3" [matTooltip]="'View database entry'">
                <mat-icon svgIcon="feather:database" class="scale-75"></mat-icon>
            </a>
            <a href="{{ traceUrl(agentDetails()!) }}" target="_blank" class="mr-3" [matTooltip]="'View traces'">
                <mat-icon class="flip-x">sort</mat-icon>
            </a>
            <a href="{{ logsUrl(agentDetails()!) }}" target="_blank" class="mr-3" [matTooltip]="'View logs'">
                <mat-icon>reorder</mat-icon>
            </a>
            <button
                mat-icon-button
                color="warn"
                (click)="forceStopAgent()"
                [disabled]="isForcingStop() || (agentDetails()?.state != 'agent' && agentDetails()?.state !='functions')"
                [matTooltip]="'Force Stop Agent (Use with caution)'"
                class="mr-3">
                <mat-icon>stop_circle</mat-icon>
            </button>
            @if (agentDetails()?.type === 'autonomous') {
                <button
                    mat-icon-button
                    color="primary"
                    (click)="requestHilCheck()"
                    [disabled]="!canRequestHil()"
                    [matTooltip]="'Request Human-in-the-Loop Check'"
                    class="mr-3">
                    @if (isRequestingHil()) {
                        <mat-icon>edit_notifications</mat-icon>
                    } @else {
                        <mat-icon>notification_add</mat-icon>
                    }
                </button>
            }
        </div>

        <div class="mb-8 flex flex-row space-x-20 items-center sm:mb-0 sm:items-start">
            <div class="mt-2 flex flex-col">
                <span class="mb-2 font-bold text-lg">Name</span>
                <span class="mb-2">{{ agentDetails()?.name }}</span>
            </div>

            <div class="mt-2 flex flex-col">
                <span class="mb-2 font-bold text-lg">Type</span>
                <span class="mb-2">{{ agentDetails()?.type }}</span>
            </div>

            <div class="mt-2 flex flex-col">
                <span class="mb-2 font-bold text-lg">Sub-Type</span>
                <span class="mb-2">{{ agentDetails()?.subtype }}</span>
            </div>

            <div class="mt-2 flex flex-col">
                <span class="mb-2 font-bold text-lg">State</span>
                <span class="mb-2">{{ displayState(agentDetails()!.state) }}
                    @if (agentDetails()?.state === 'completed') {
                        <a (click)="openResumeModal()" class="resume-link">Resume agent</a>
                    }
                </span>
            </div>
        </div>


        <div class="mb-8 flex flex-row items-center sm:mb-0 sm:items-start">
            @if (agentDetails()?.parentAgentId) {
                <div class="mt-2 flex flex-col">
                    <span class="mb-2 font-bold text-lg">Parent Agent ID</span>
                    <span class="mb-2">{{ agentDetails()?.parentAgentId }}</span>
                </div>
            }
        </div>


        <span class="mb-2 pt-3 font-bold text-lg">User prompt</span>
        <mat-expansion-panel #expansionPanel>
            <mat-expansion-panel-header [class.expanded-header]="expansionPanel.expanded">
                <mat-panel-title *ngIf="!expansionPanel.expanded">
                    <span class="expansion-preview">
                        {{ agentDetails()?.userPrompt | slice : 0 : 150 }}
                    </span>
                </mat-panel-title>
            </mat-expansion-panel-header>
            <div style="white-space: pre-wrap">{{ agentDetails()?.userPrompt }}</div>
        </mat-expansion-panel>

        @if (agentDetails()?.state === 'completed') {
            <span class="mb-2 pt-3 font-bold text-lg">Output</span>
            <mat-expansion-panel
                    (opened)="outputExpanded.set(true)"
                    (closed)="outputExpanded.set(false)"
            >
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        <span class="expansion-preview" [ngClass]="{ hidden: outputExpanded() }">
                            {{ agentDetails()?.output | slice : 0 : 150 }}
                        </span>
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <div style="white-space: pre-wrap">
                    <markdown
                        mermaid
                        clipboard
                        [clipboardButtonComponent]="clipboardButton"
                        [data]="agentDetails()?.output"
                        ngPreserveWhitespaces
                    ></markdown>
                </div>
            </mat-expansion-panel>
        }

        <span class="mb-2 pt-3 font-bold text-lg">Functions</span>

        <div class="function-column">
            <span>{{ agentDetails()?.functions?.functionClasses?.sort().join(', ') }}</span>
            @if (agentDetails().state !== 'agent' && agentDetails().state !== 'functions') {
                <button
                        mat-icon-button
                        (click)="openFunctionEditModal()"
                        aria-label="Edit functions"
                >
                    <mat-icon>edit</mat-icon>
                </button>
            }
        </div>

        <span class="mb-2 pt-3 text-lg font-bold">LLMS</span>
        @let llmState = llmService.llmsState();
        @switch (llmState.status) {
            @case ('loading') {
                <mat-progress-spinner diameter="20" mode="indeterminate"></mat-progress-spinner>
            }
            @case ('error') {
                <span class="text-red-500">{{ llmState.error?.message || 'Failed to load LLM data' }}</span>
            }
            @case ('success') {
                <div class="llm-container">
                    <div class="llm-column">
                        <span class="llm-level">Easy:</span>
                        <span class="llm-value">{{ getLlmName(agentDetails()!.llms.easy) }}</span>
                    </div>
                    <div class="llm-column">
                        <span class="llm-level">Med:</span>
                        <span class="llm-value">{{ getLlmName(agentDetails()!.llms.medium) }}</span>
                    </div>
                    <div class="llm-column">
                        <span class="llm-level">Hard:</span>
                        <span class="llm-value">{{ getLlmName(agentDetails()!.llms.hard) }}</span>
                    </div>
                </div>
            }
            @case ('idle') {
                <p>No LLM information available</p>
            }
        }


        <div class="mt-2 pt-3 flex flex-col">
            <span class="mb-2 font-bold text-lg " >Cost</span>
            <span class="mb-2">${{ agentDetails()?.cost | number : '1.2-2' }}</span>
        </div>

        <div class="mt-2 flex flex-col">
            <span class="mb-2 font-bold text-lg">Working Directory</span>
            <span class="mb-2">{{ agentDetails()?.fileSystem?.workingDirectory }}</span>
        </div>

    </mat-card>
} @else {
    <!-- Show a loading spinner or message while agentDetails is null -->
    <div class="flex justify-center items-center p-8">
        <mat-progress-spinner diameter="40" mode="indeterminate"></mat-progress-spinner>
    </div>
}

